<template>
    <div id="button">
        <div class="buttons">
            <div class="buttonLogo">
                <img src="../assets/images/知遇1.png" alt="">
                <p>让知识遇见更好的自己</p>
            </div>
            <div class="buttonText">
                <p>©知遇版权所有</p>
            </div>
            <div class='buttonHerf'>
                <li><a href="">闲 嗑</a> </li>
                <li><a href="">专 栏</a></li>
                <li><a href="">社 区</a></li>
                <li><a href="">书 店</a></li>
            </div>
            <div class="buttonJoin">
                <router-link to="/login"><a href="">登录/注册</a></router-link>
            </div>
        </div>
    </div>
</template>
<style>
    #button{
            position: relative;
            top: 100%;
            width: 100%;
            height:320px;
        }
        #button .buttons{
            position: relative;
            width: 1000px;
            height: 320px;
            left: 50%;
            transform: translateX(-50%);
            padding-left: 100px;
        }
        #button .buttons .buttonLogo{
            position: relative;
            width: 240px;
            top: 50%;
            transform: translateY(-60%);
            color:white;
            font-size: 22px;
            float: left;
        }
        #button .buttons .buttonLogo p{
            margin: 0;
            text-align: center;
        }
        #button .buttons .buttonText{
            position: relative;
            width: 300px;
            top: 50%;
            transform: translateY(-60%);
            color:white;
            font-size: 22px;
            float: left;
            text-align: center;
            font-size: 16px;
        }
        #button .buttons .buttonHerf{
            position: relative;
            width: 200px;
            float: left;
            top: 50%;
            transform: translateY(-60%);
            list-style: none;
            color: white;
            font-size: 18px;
            text-align: center;
        }
        #button .buttons .buttonHerf li{
            margin: 20px;
        }
        #button .buttons .buttonJoin{
            position: relative;
            width: 200px;
            float: left;
            top: 50%;
            transform: translateY(-60%);
            list-style: none;
            font-size: 18px;
            text-align: center;
        }
        #button .buttons a{
            text-decoration: none;
            color: white;
            transition: all .3s;
        }
        #button .buttons a:hover{
            color: rgb(25,167,253);
        }
</style>